
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:xin_he/utils/xh_styles.dart';


// class CustomTabIndicator extends Decoration {
//   /// Create an underline style selected tab indicator.
//   ///
//   /// The [borderSide] and [insets] arguments must not be null.
//   const CustomTabIndicator({
//     this.width = 24,
//     this.strokeCap = StrokeCap.round,
//     this.borderSide = const BorderSide(width: 4.0, color: Colors.red),
//     this.insets = EdgeInsets.zero,
//   })  : assert(borderSide != null),
//         assert(insets != null);
//
//   /// The color and weight of the horizontal line drawn below the selected tab.
//   final BorderSide borderSide;
//
//   /// Locates the selected tab's underline relative to the tab's boundary.
//   ///
//   /// The [TabBar.indicatorSize] property can be used to define the tab
//   /// indicator's bounds in terms of its (centered) tab widget with
//   /// [TabBarIndicatorSize.label], or the entire tab with
//   /// [TabBarIndicatorSize.tab].
//   final EdgeInsetsGeometry insets;
//
//   ///新增的属性
//   final double width; // 控制器宽度
//   final StrokeCap strokeCap; // 控制器边角形状
//
//   @override
//   Decoration? lerpFrom(Decoration? a, double t) {
//     if (a is CustomTabIndicator) {
//       return CustomTabIndicator(
//         borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
//         insets: EdgeInsetsGeometry.lerp(a.insets, insets, t)!,
//       );
//     }
//     return super.lerpFrom(a, t);
//   }
//
//   @override
//   Decoration? lerpTo(Decoration? b, double t) {
//     if (b is CustomTabIndicator) {
//       return CustomTabIndicator(
//         borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
//         insets: EdgeInsetsGeometry.lerp(insets, b.insets, t)!,
//       );
//     }
//     return super.lerpTo(b, t);
//   }
//
//   @override
//   BoxPainter createBoxPainter([VoidCallback? onChanged]) {
//     return _UnderlinePainter(this, onChanged);
//   }
//
//   ///决定控制器宽度的方法
//   Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
//     assert(rect != null);
//     assert(textDirection != null);
//     final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
//
//     // 希望的宽度
//     double wantWidth = this.width;
//     // 取中间坐标
//     double cw = (indicator.left + indicator.right) / 2;
//
//     // print(
//     //     '$cw,indicator left${indicator.left}, right ${indicator.right}, indicator top ${indicator.top},indicator bottom${indicator.bottom}, border width${borderSide.width}');
//     //这里是核心代码 //下划线靠左
//     // return Rect.fromLTWH(indicator.left,
//     //     indicator.bottom - borderSide.width, wantWidth, borderSide.width);
//
//     //下划线居中
//     return Rect.fromLTWH(cw - wantWidth / 2,
//         indicator.bottom - borderSide.width, wantWidth, borderSide.width);
//   }
//
//   @override
//   Path getClipPath(Rect rect, TextDirection textDirection) {
//     return Path()..addRect(_indicatorRectFor(rect, textDirection));
//   }
// }
//
// class _UnderlinePainter extends BoxPainter {
//   _UnderlinePainter(this.decoration, VoidCallback? onChanged)
//       : assert(decoration != null),
//         super(onChanged);
//
//   final CustomTabIndicator decoration;
//
//   ///决定控制器边角形状的方法
//   @override
//   void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
//     assert(configuration != null);
//     assert(configuration.size != null);
//     final Rect rect = offset & configuration.size!;
//     final TextDirection textDirection = configuration.textDirection!;
//     final Rect indicator = decoration
//         ._indicatorRectFor(rect, textDirection)
//         .deflate(decoration.borderSide.width / 2.0);
//     final Paint paint = decoration.borderSide.toPaint();
//     paint.strokeCap = decoration.strokeCap; //这块更改为想要的形状
//
//     // final Paint paint = Paint();
//
//     // paint.shader = ui.Gradient.linear(
//     //     const Offset(0, 10),const Offset(26, 10), gradientColor);
//
//     paint.shader =  LinearGradient(
//       begin: Alignment.topLeft,
//       // end: const Alignment(0.6, 0.0), // 10% of the width, so there are ten blinds.
//       end:  Alignment.topRight,
//       colors:   [XinHeColor('#FDE3B7'), XinHeColor('#ECB06D')], // whitish to
//     ).createShader(indicator);
//
//     // paint.shader = ui.Gradient.linear(rect.topLeft, rect.bottomRight,  [KDColor('#FDE3B7'), KDColor('#ECB06D')]);
//
//     canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
//   }
// }




///左上右上圆角，带渐变色
class RoundedTabIndicator extends Decoration {
  RoundedTabIndicator({
    Color color = Colors.white,
    double radius = 2.0,
    double width = 29.0,
    double height = 2.0,
    double bottomMargin = 29/2.0,
  }) : _painter = _RoundedRectanglePainter(
    color,
    width,
    height,
    radius,
    bottomMargin,
  );

  final BoxPainter _painter;

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _painter;
  }
}

class _RoundedRectanglePainter extends BoxPainter {
  _RoundedRectanglePainter(
      Color color,
      this.width,
      this.height,
      this.radius,
      this.bottomMargin,
      ) : _paint = Paint()
  // ..color = color
    ..isAntiAlias = true;

  final Paint _paint;
  final double radius;
  final double width;
  final double height;
  final double bottomMargin;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final centerX = (cfg.size?.width ?? 0) / 2 + offset.dx;
    final bottom = (cfg.size?.height) ?? 0 - bottomMargin;
    final halfWidth = width / 2;

    _paint.shader =   LinearGradient(
      begin: Alignment.topLeft,
      end:  Alignment.topRight,
      colors:   [ XinHeStyle.mainGreenColor,XinHeStyle.mainGreenColor],
      // colors:   [Colors.red, Colors.blue],
    ).createShader( Rect.fromLTRB(centerX - halfWidth,
        bottom - height,
        centerX + halfWidth,
        bottom));
    canvas.drawRRect(RRect.fromLTRBAndCorners(
      centerX - halfWidth,
      bottom - height,
      centerX + halfWidth,
      bottom,
      topLeft: const Radius.circular(1),
      topRight: const Radius.circular(1),
    ), _paint,);

  }
}

